<template>
	<view>
		<view class="search">
			<view class="search-msg">
				<image :src="imglink + 'recommend/searchhui.png'" style="width: 35upx;height: 35upx;vertical-align: middle;display: inline-block;margin-left: 20upx;"></image>
				<input placeholder="输入关键字" class="search-input" v-model="content"/>
			</view>
			<view class="search-text" @click="getCondition">搜索</view>
		</view>
		<scroll-view class="" style="height: 92vh;"
			scroll-y="true" 
			@scrolltolower="LoadingCondition">
			<view class="data-list" v-for="(item,index) in listdata" :key="index" @click="search(item)">
				<!-- 图片 -->
				<view>
					<image :src="item.store_img" class="data-list-head_image" v-if="item.type == 1"></image>
					<image :src="item.head_img" class="data-list-head_image" v-if="item.type == 2"></image>
					<image :src="item.image.image" class="data-list-head_image" v-if="item.type == 3"></image>
				</view>
				<!-- 标题文字 -->
				<view class="data-list-title_text">{{item.video_detail | getStr(20) || item.name | getStr(20)}}</view>
				<!--  -->
				<!-- 类型 -->
				<view class="data-list-title_category" v-if="item.type == 1">机构</view>
				<view class="data-list-title_category-bule" v-if="item.type == 2">视频</view>
				<view class="data-list-title_category-yell" v-if="item.type == 3">课程</view>
				<!-- 头像、昵称、定位 -->
				<!-- 机构 -->
				<view class="data-list-bottom" v-if="item.type == 1">
					<view class="data-list-bottom-img">
						<image :src="item.store_logo" class="data-list-logo_image"></image>
						<view class="data-list-name_text">{{item.name | getStr(8)}}</view>
					</view>
					<view class="data-list-bottom-position" v-if="item.distance">
						<image :src="imglink + 'recommend/location_Hui.svg'" style="width: 40upx;height: 40upx;vertical-align: middle;display: inline-block;right: 10upx;"></image>
						<view style="display: inline-block;vertical-align: middle;font-size: 25upx;">{{item.distance | getdec}}</view>
					</view>
				</view>
				<!-- 短视频 -->
				<view class="data-list-bottom" v-if="item.type == 2">
					<view class="data-list-bottom-img">
						<image :src="item.store.store_logo" class="data-list-logo_image"></image>
						<view class="data-list-name_text">{{item.store.name | getStr(8)}}</view>
					</view>
					<view class="data-list-bottom-position" v-if="item.distance">
						<image :src="imglink + 'recommend/location_Hui.svg'" style="width: 40upx;height: 40upx;vertical-align: middle;display: inline-block;right: 10upx;"></image>
						<view style="display: inline-block;vertical-align: middle;font-size: 25upx;">{{item.distance | getdec}}</view>
					</view>
				</view>
				<!-- 课程 -->
			<!-- 	<view class="data-list-bottom" v-if="item.type == 3">
					<view class="data-list-bottom-img">
						<image :src="item.store.store_logo" class="data-list-logo_image"></image>
						<view class="data-list-name_text">{{item.store.name | getStr(8)}}</view>
					</view>
					<view class="data-list-bottom-position">
						<image :src="imglink + 'recommend/location_Hui.svg'" style="width: 40upx;height: 40upx;vertical-align: middle;display: inline-block;right: 10upx;"></image>
						<view style="display: inline-block;vertical-align: middle;font-size: 25upx;">{{item.distance | getdec}}</view>
					</view>
				</view> -->
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				content:'',
				listdata:[
					
				],
				page:1,
				pagesize:10,
				recomLastPage:0,
				dingwei:[],
			}
		},
		onLoad(options) {
			this.dingwei = uni.getStorageSync('dingwei')
		},
		methods: {
			getCondition(){
				console.log(this.content);
				let data = {
					token:this.$store.getters.getToken,
					content:this.content,
					long_lati:this.dingwei,
					page:1,
					pagesize:10
				}
				console.log("8888888",data);
				// 3.发送请求
				this.$api.get_condition(data).then(res => {
					if(res.status){
						this.listdata = res.data
						this.recomLastPage = res.lastPage
						console.log(this.listdata,'搜索结果')
					}else{
						uni.showToast({
							title:res.msg,
							icon:'none',
							duration:2000
						})
					}
				}).catch(err =>{
					console.log(err)
				})
			},
			LoadingCondition(){
				this.page ++
				if(this.page <= this.recomLastPage){
					let data = {
						token:this.$store.getters.getToken,
						content:this.content,
						long_lati:this.dingwei,
						page:this.page,
						pagesize:this.pagesize
					}
					console.log("8888888");
					// 3.发送请求
					this.$api.get_condition(data).then(res => {
						if(res.status){
							this.listdata = this.listdata.concat(res.data)
							console.log("上拉加载更多的数据.....")
							console.log(this.listdata,'关注视频')
						}else{
							uni.showToast({
								title:res.msg,
								icon:'none',
								duration:2000
							})
						}
					}).catch(err =>{
						console.log(err)
					})
				}
			},
			search(item){
				if(item.type == 1){
					uni.navigateTo({
						url: 'mechanism?store_id=' + item.customer_store_id
					})
				}else if(item.type == 2){
					uni.navigateTo({
						url: 'videoshow?search=1&id=' + item.id
					})
				}else if(item.type == 3){
					uni.navigateTo({
						url: '/pages/home/organization/activeDetail-3?page=details&actId=' + item.activity_id + '&store_id=' + item.store_id
					})
					// uni.navigateTo({
					// 	url: 'organization/activeDetail-3?page=details&actId=' + activity_id + '&store_id=' + this.store_id
					// })
				}
			}
		},
		filters: {
			getdec(distance){
				if(distance < 1000){
					console.log(distance+"米");
					return distance.toFixed(0) + 'm'
				}
				else if(distance > 1000){
					console.log((Math.round(distance/100)/10).toFixed(1) + "公里")
					return (Math.round(distance/100)/10).toFixed(1) + "km"
				}
			},
			getStr(str, new_length) {
				// console.log('getStr', str);
				if (!str) {
					return ''
				}
				if (str.length > new_length) {
					return str.slice(0, new_length) + '...'
				} else {
					return str
				}
			},
		},
	}
</script>

<style>
.search{
	padding: 30upx 20upx 20upx 40upx;
}
.search-msg{
	width: 570upx;
	border-radius: 30upx;
	display: inline-block;
	background-color: #eaeaea;
}
.search-input{
	width: 450upx;
	margin-top: 10upx;
	margin-bottom: 10upx;
	display: inline-block;
	vertical-align: middle;
	margin-left: 20upx;
}
.search-text{
	display: inline-block;
	margin-left: 20upx;
	color: #0084FF;
}
.data-list{
	position: relative;
	border-bottom: 1upx solid #eaeaea;
	width: 100;
	height: 270upx;
	padding: 20upx 20upx 0upx 20upx;
}
.data-list-head_image{
	max-width:100%;
	width: 250upx;
	height: 250upx;
	float: left;
	border-radius: 20upx;
}
.data-list-title_text{
	margin-left: 10upx;
	display: inline-block;
	width: 430upx;
	font-size: 30upx;
}
.data-list-title_category{
	display: inline-block;
	width: 80upx;
	padding: 5upx 0;
	text-align: center;
	margin-left: 10upx;
	font-size: 24upx;
	color: #ffffff;
	background-color: #1CB419;
	border-radius: 20upx;
}
.data-list-title_category-bule{
	display: inline-block;
	width: 80upx;
	padding: 5upx 0;
	text-align: center;
	margin-left: 10upx;
	font-size: 24upx;
	color: #ffffff;
	background-color: #10BCBB;
	border-radius: 20upx;
}
.data-list-title_category-yell{
	display: inline-block;
	width: 80upx;
	padding: 5upx 0;
	text-align: center;
	margin-left: 10upx;
	font-size: 24upx;
	color: #ffffff;
	background-color: #FF6D16;
	border-radius: 20upx;
}
.data-list-bottom{
	position: absolute;
	display: inline-block;
	width: 430upx;
	bottom: 10upx;
	right: 40upx;
}
.data-list-bottom-img{
	display: inline-block;
	width: 280upx;
}
.data-list-logo_image{
	max-width: 100%;
	width: 55upx;
	height: 55upx;
	border-radius: 60upx;
	display: inline-block;
	vertical-align: middle;
}
.data-list-name_text{
	display: inline-block;
	vertical-align: middle;
	margin-left: 15upx;
	font-size: 25upx;
}
.data-list-bottom-position{
	display: inline-block;
	vertical-align: middle;
	margin-left: 30upx;
	float: right;
}
.activity-msg-img{
	position: absolute;
	z-index: 9;
}
.activity-msg-img>text{
	display: inline-block;
	width: 138upx;
	height: 60upx;
	line-height: 60upx;
	font-size: 28upx;
	text-align: center;
	color: #FFFFFF;
	background-image: url(https://tool.tuanhaoke.cn/static/image/member/activity-collection-code.png);
	border-radius: 20upx 30upx 30upx  0;
}



/* .join-avatar-item {
		display: inline-block;
	}

.join-avatar-item image {
	height: 48rpx;
	width: 48rpx;
	border-radius: 50%;
}
.join-avatar-item:not(:first-child) {
	margin-left: -15rpx;
}
.join-peopel-right {
	font-size: 18px;
	color: #666;
}

.join-peopel-right .num {
	font-size: 36rpx;
	color: #ff391f;
	font-weight: bold;
} */



.data-list-subject{
	width: 64upx;
	height: 34upx;
	background: rgba(255,255,255,0.85);
	border: 1upx solid #FF664F;
	border-radius: 20upx;
	font-size: 30upx;
	display: inline-block;
	padding: 2upx 10upx;
	color: #FF664F;
	letter-spacing: 0;
	line-height: 35upx;
	margin-left: 10upx;
	position: relative;
	top: -30upx;
}
</style>
